<template>
  <div>
    <div class="container">
      <div class="left">
        <div class="card" @click="goTo(item.path)" v-for="item in menus">
          <div class="icon" :style="{'background-position':'0 -'+item.pos * 106+'px'}"></div>
          <div class="name" v-text="item.name"></div>
          <div class="bottom"><div class="inner"></div></div>
        </div>
      </div>
      <div style="clear:both;"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: "home",
  data(){
    return {
    }
  },
  methods:{
    goTo(path) {
      this.$router.push({path:path})
    }
  },
  computed:{
    menus(){
      return this.$store.state.menus
    }
  }
}
</script>

<style scoped lang="less">

  .container {
    max-width: 80%;
    margin: 10px auto;
    display: flex;

    .company {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-52%);
      font-size: 14px;
      color: #8A8A8A;
      text-align: center;
    }

    .left {
      flex: 1;
      padding: 15px;

      .card{
        padding: 20px;
        margin: 17px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        float: left;
        position: relative;
        overflow: hidden;

        &:hover {
          .bottom {
            bottom: 20px;
          }
        }

        .icon {
          width: 96px;
          height: 96px;
          background: url('~@/assets/icons/product-icons.png') no-repeat;
          background-size: 100% auto;
        }
        .name {
          text-align: center;
          font-size: 14px;
          color: #333;
          padding: 6px 10px 13px;
          border-radius: 2px;
          border-color: #F7F6F7;
        }
        .bottom {
          position: absolute;
          bottom: -20px;
          transition: bottom .3s;
          width: 100%;
          .inner {
            width: 60%;
            height: 3px;
            background: #8E8E8E;
            border-radius: 2px;
            margin: 0 auto;
          }
        }
      }
    }
    .right {
      width: 200px;
      flex-shrink: 0;
      border: 1px solid black;
      padding: 15px;
    }
  }

  @media(max-width: 679px) {
    .container {
      width: 100%;
      .left {
        .card{
          width: 50%;
          margin: 0;
          box-sizing: border-box;
        }
      }
    }
  }

  @media(max-width: 1024px) {
    .right {
      display: none;
    }
  }
</style>
